<template>
  <div>
    <el-table :data="dataSource" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            label-position="left"
            class="demo-table-expand"
            size="mini"
            label-width="10%"
          >
            <el-form-item label="计算项目编号">
              <span>{{ props.row.preId }}</span>
            </el-form-item>
            <el-form-item label="工作流模型">
              <span>{{ props.row.workflowId }}</span>
            </el-form-item>
            <el-form-item label="开始时间">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item label="发起人">
              <span>{{ props.row.createUser }}</span>
            </el-form-item>
          </el-form>
          <el-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="props.row.rate"
            status="success"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="计算项目编号" prop="oid"></el-table-column>
      <el-table-column label="所有者" prop="createUser"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goDetail(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'CalculationItemInfo',
    props: {
      /*结构树数据源*/
      dataSource: {
        type: Array,
        required: true,
        default: () => {
          return [
            {
              id: 1,
              name: '计算项目001',
              owner: 'admin',
              creatTime: '2020-7-20',
              status: 1,
              workFlowID: 'wf-001',
              rate: 10,
              currentActivity: '计算项目001',
            },
            {
              id: 2,
              name: '计算项目002',
              owner: 'admin',
              creatTime: '2020-7-21',
              status: 2,
              workFlowID: 'wf-001',
              rate: 30,
              currentActivity: '计算项目002',
            },
            {
              id: 3,
              name: '计算项目003',
              owner: 'admin',
              creatTime: '2020-7-22',
              status: 3,
              workFlowID: 'wf-001',
              rate: 70,
              currentActivity: '计算项目003',
            },
          ]
        },
      },
    },
    methods: {
      goDetail: function (row) {
        this.$emit('change', row)
      },
    },
  }
</script>

<style scoped>
  .el-form-item {
    margin: 0;
  }
</style>
